<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示相机事件
 * 1.显示相机监听事件
 * 2.自定义相机交互
 * 3.键盘漫游事件
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  const viewer = new Cesium.Viewer("cesiumContainer");
  const callback = () => {
    console.log("触发钩子");
  };
  /** -------------------------场景监听事件-------------------------------- */
  // 1. 场景更新或者呈现场景之前触发的事件
  viewer.scene.preUpdate.addEventListener(callback)
  viewer.scene.preUpdate.removeEventListener(callback)
  // 2. 场景更新后或者渲染场景之前触发的事件
  viewer.scene.postUpdate.addEventListener(callback)
  viewer.scene.postUpdate.removeEventListener(callback)
  // 3. 场景更新后，渲染场景之前的事件
  viewer.scene.preRender.addEventListener(callback)
  viewer.scene.preRender.removeEventListener(callback)
  // 4. 渲染场景之后触发的钩子函数
  viewer.scene.postRender.addEventListener(callback)
  viewer.scene.postRender.removeEventListener(callback)

  /** -------------------------相机监听事件-------------------------------- */

  viewer.scene.camera.moveStart.addEventListener(callback); // 相机开始移动的钩子
  viewer.scene.camera.moveStart.addEventListener(callback); // 相机开始移动的钩子
  viewer.scene.camera.moveEnd.addEventListener(callback); // 相机结束移动的钩子

  // 注销事件
  // viewer.scene.camera.moveStart.removeEventListener(callback)
  // viewer.scene.camera.moveEnd.removeEventListener(callback)

  /** ---------------------------自定义相机交互行为------------------------------ */
  //  viewer.scene.screenSpaceCameraController： Cesium 中控制摄像机交互行为的对象
  viewer.scene.screenSpaceCameraController.enableRotate = true; // 允许用户旋转相机
  viewer.scene.screenSpaceCameraController.enableTranslate = true; // 允许用户平移相机
  viewer.scene.screenSpaceCameraController.enableZoom = true; // 允许用户缩放
  viewer.scene.screenSpaceCameraController.enableTilt = true; // 允许用户倾斜

  //自定义倾斜相机的操作
  viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.RIGHT_DRAG, // 右键拖拽可以倾斜相机
    Cesium.CameraEventType.PINCH, // 手指捏合手势（多点触控）可以倾斜相机
    {
      eventType: Cesium.CameraEventType.LEFT_DRAG, // 左键拖拽时按住 Ctrl 键可以倾斜相机
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
    {
      eventType: Cesium.CameraEventType.RIGHT_DRAG, // 右键拖拽时按住 Ctrl 键也可以倾斜相机
      modifier: Cesium.KeyboardEventModifier.CTRL,
    },
  ];

  // 相机的缩放
  viewer.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.MIDDLE_DRAG, // 中键拖拽进行缩放
    Cesium.CameraEventType.WHEEL, // 鼠标滚轮进行缩放
    Cesium.CameraEventType.PINCH, // 手指捏合手势（多点触控）进行缩放
  ];

  /** ---------------------------键盘漫游事件------------------------------ */
  const flag = {
    w: false, // 上
    s: false, // 下
    a: false, // 左
    d: false, // 右
    q: false, // 深
    e: false, // 浅
  };
  const keyList = Object.keys(flag);
  // 1.监听键盘事件
  document.addEventListener("keydown", (e) => {
    const key = e.key;
    if (key && keyList.includes(key)) {
      flag[key] = true;
    }
  });
  document.addEventListener("keyup", (e) => {
    const key = e.key;
    if (key && keyList.includes(key)) {
      flag[key] = false;
    }
  });

  console.log("  viewer.clock", viewer.clock);

  const ellipsoid = viewer.scene.globe.ellipsoid; // 椭球体
  const camera = viewer.camera;

  // 2. cesium 每一帧执行的操作
  viewer.clock.onTick.addEventListener((clock) => {
    const cameraHeight = ellipsoid.cartesianToCartographic(
      camera.position
    ).height; // 弧度坐标
    const moveRate = cameraHeight / 100.0; // 移动速度, 因为这个是每一帧执行的，因此常量也能表示速度
    if (flag.w) {
      camera.moveUp(moveRate); // 上
    }
    if (flag.s) {
      camera.moveDown(moveRate); // 下
    }
    if (flag.a) {
      camera.moveLeft(moveRate); // 左
    }
    if (flag.d) {
      camera.moveRight(moveRate); // 右
    }
    if (flag.q) {
      camera.moveForward(moveRate); // 深
    }
    if (flag.e) {
      camera.moveBackward(moveRate); // 浅
    }
  });
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
